<template>
	<view class="content">
		<view class="Code">
			<view class="code-icon">
				<image
					src="@/static/indexphoto/erwecode.png"
					mode=""
					class="code-img"
				></image>
			</view>
			<view class="code-text">请输入验证码</view>
			<view class="code-num">
				<view class="num-te">已发送</view>
				<view class="eiephone">{{ phonenumber }}</view>
			</view>
			<view class="FLEX">
				<view
					class="FLEX-list"
					@click="keyboard = true"
					v-for="(item, index) in 6"
					:key="index"
					:class="
						codevalue.length == index ? 'choosebordercolor' : ''
					"
				>
					{{ codevalue[index] || '' }}
				</view>
			</view>
			<view class="mk-time">
				{{
					time >= 1
						? time + '秒后重新获取新验证码'
						: '请重新获取验证码'
				}}
			</view>
		</view>
		
		<tm-keyboard type="number" v-model="codevalue" v-model:show="keyboard" @change="codechange"></tm-keyboard>
	</view>
</template>

<script>
// import { loginByCode } from '@/api/login';
export default {
	data() {
		return {
			phonenumber: '',
			keyboard: false,
			codevalue: '',
			time: 60
		};
	},

	methods: {
		codebackspace(e) {
			this.codevalue = this.codevalue.slice(0, -1);
		},
		codechange() {
			if (this.codevalue.length == 6) {
				uni.showLoading({});
				loginByCode({
					phone: this.phonenumber,
					code: this.codevalue
				})
					.then((res) => {
						uni.showToast({
							icon: 'success',
							title: res.message
						})
						if (res.status === 200) {
							uni.setStorageSync('token', res.data.token);
							if (res.data.member && res.data.member == null) {
								uni.setStorageSync('userInfo2', {});
							}
							uni.setStorageSync(
								'userInfo2',
								JSON.stringify(res.data.member)
							);
							uni.hideLoading();
							uni.switchTab({
								url: '/pages/tabbar/tab1/index'
							});
						}
					})
					.catch((err) => {
						uni.hideLoading();
					});
			}
		}
	},
	mounted() {
		const timesolt = setInterval(() => {
			if (this.time < 1) {
				clearInterval(timesolt);
			} else {
				this.time--;
			}
		}, 1000);
	},
	onLoad(option) {
		this.phonenumber = option.phonenumber;
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 750rpx;
	min-height: 100vh;
	padding: 100rpx 58rpx 0;
	box-sizing: border-box;
	.Code {
		.code-icon {
			width: 180rpx;
			margin: 0 auto;
			margin-bottom: 24rpx;
			.code-img {
				width: 180rpx;
				height: 180rpx;
			}
		}
		.code-text {
			width: 100%;
			text-align: center;

			height: 40rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1d2129;
			line-height: 40rpx;
			margin-bottom: 20rpx;
		}
		.code-num {
			width: 100%;
			height: 40rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			line-height: 40rpx;
			margin-bottom: 82rpx;
			display: flex;
			justify-content: center;
			.num-te {
				color: rgba(0, 0, 0, 0.4);
			}
			.eiephone {
				color: rgba(29, 33, 41, 1);
				font-weight: 700;
			}
		}
		.FLEX {
			margin-bottom: 40rpx;
			display: flex;
			justify-content: space-around;
			.FLEX-list {
				width: 92rpx;
				height: 92rpx;
				background: #f7f8f9;
				border-radius: 24rpx;
				border: 2rpx solid rgba(0, 0, 0, 0);
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.choosebordercolor {
				border: 2rpx solid #f1949e;
			}
		}
		.mk-time {
			height: 40rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.4);
			line-height: 40rpx;
		}
	}
}
</style>
